
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>测试</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="robots" content="all,follow">
    <!-- Bootstrap CSS-->
    <link rel="stylesheet" href="/common/JxcpcsPage/vendor/bootstrap/css/bootstrap.min.css">
    <!-- theme stylesheet-->
    <link rel="stylesheet" href="/common/JxcpcsPage/css/style.default.css" id="theme-stylesheet">
    <link rel="stylesheet" href="/common/JxcpcsPage/jquery-labelauty.css">
    <link rel="stylesheet" href="/common/JxcpcsPage/css/custom.css">
    <style>
        input {
            font: 12px "Microsoft Yahei";
        }
    </style>

</head>
<body>
<div class="page" style="padding: 5px;">
    <div class="container-fluid">
        <center>
            <h2>${yyxx.xssname}学习行为倾向测评报告</h2>
        </center>
        <hr />
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header d-flex align-items-center">
                        <h3 class="h4">
                            Part 1: 您的基本信息
                        </h3>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="articles card">
                                    <div class="card-body no-padding">
                                        <c:forEach var="item" items="${jxcpcsAccessPageBean.dxlist_JBXX}">
                                            <span class="badge badge-pill badge-info" style="margin: 5px;font-size: large;">${item.sname}</span>
                                        </c:forEach>
                                    </div>
                                </div>
                            </div>
                            <c:if test="${jxcpkcTemp!=null}">
                                <div class="col-lg-12">
                                    <div class="articles card">
                                        <div class="card-body no-padding">
                                            <c:forEach var="item" items="${jxcpkcTemp}">
                                                <div style="float: left;text-align: center;">
                                                    <img src="http://crm.imelite.com.cn:8001/${item.kclogo}" style="height: 100px;" ><br />
                                                    <span class="badge badge-pill badge-info" style="margin: 5px;font-size: large;">${item.sname}</span>
                                                </div>

                                            </c:forEach>
                                        </div>
                                    </div>
                                </div>
                            </c:if>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header d-flex align-items-center">
                        <h3 class="h4">
                            Part 2: 您的"感觉-思考-行动-观察"类型
                        </h3>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="card-body no-padding">
                                <c:forEach var="item" items="${jxcpcsAccessPageBean.GNSK_yh}">
                                    <span class="badge badge-pill badge-info" style="margin: 5px;font-size: large;">${item.sname}</span>

                                </c:forEach>
                            </div>
                            <div class="col-lg-12">
                                <div class="articles card">
                                    <div class="card-body no-padding">
                                        <div id="GNSK" style="width: 100%;height: 400px;"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-12">
                                <div id="GNSK_MSG" role="tablist" aria-multiselectable="true"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header d-flex align-items-center">
                        <h3 class="h4">
                            Part 3: 您的"视觉-听觉-动觉"类型
                        </h3>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="card-body no-padding">
                                <c:forEach var="item" items="${jxcpcsAccessPageBean.SJTJ_yh}">
                                    <span class="badge badge-pill badge-info" style="margin: 5px;font-size: large;">${item.sname}</span>
                                </c:forEach>
                            </div>
                            <div class="col-lg-12">
                                <div class="articles card">
                                    <div class="card-body no-padding">
                                        <div id="SJTJ" style="width: 100%;height: 400px;"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-12">
                                <div id="SJTJ_MSG" role="tablist" aria-multiselectable="true"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <%--<div class="card-header d-flex align-items-center" >--%>
                        <%--<h3 class="h4">--%>
                            <%--<c:forEach var="item" items="${jxcpcsAccessPageBean.dxlist_JBXX}">--%>
                                <%--<div class="badge badge-rounded bg-green">${item.sname}</div>--%>
                            <%--</c:forEach>--%>
                        <%--</h3>--%>
                    <%--</div>--%>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="articles card">
                                    <div class="card-header d-flex align-items-center">
                                        <h2 class="h3">Part 4: 您的心理与性格特征</h2>
                                    </div>
                                    <div class="card-body no-padding">
                                        <c:forEach var="item" items="${jxcpcsAccessPageBean.dxlist_XLTZ}">
                                            <c:if test="${item.accessMsg !=null}">
                                                    <c:if test="${item.sfxz}">
                                                        <span class="badge badge-pill badge-info" style="margin: 5px;font-size: large;">
                                                    </c:if>
                                                    <c:if test="${!item.sfxz}">
                                                        <span class="badge badge-pill badge-secondary" style="margin: 5px;font-size: large;">
                                                    </c:if>
                                                    ${item.sname}
                                                </span>

                                                <div class="item d-flex align-items-center">
                                                    <div class="text">
                                                        <span>${item.accessMsg}</span>
                                                    </div>
                                                </div>
                                                <hr />
                                            </c:if>
                                        </c:forEach>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <%--<center>--%>
        <%--<button id="savePrint">保存打印项</button>--%>
    <%--</center>--%>

</div>
<!-- JavaScript files-->

<script src="/common/JxcpcsPage/vendor/jquery/jquery.min.js"></script>
<script src="/common/JxcpcsPage/vendor/popper.js/umd/popper.min.js"> </script>
<script src="/common/JxcpcsPage/vendor/bootstrap/js/bootstrap.min.js"></script>
<!-- Main File-->
<script src="/common/JxcpcsPage/jquery-labelauty.js"></script>
<script src="/common/echarts.min.js"></script>
<script>
    // 基于准备好的dom，初始化echarts实例
    var GNSK = echarts.init(document.getElementById('GNSK'));
    var GNSK_json=${jxcpcsAccessPageBean.GNSK_JSON};
    var datas=[];
    var nums=[];
    var str="";

    var max_temp=0;//选择最多的
    for(var i=0;i<GNSK_json.length;i++) {
        if(GNSK_json[i].num>max_temp){
            max_temp=GNSK_json[i].num;
        }
    }

    for(var i=0;i<GNSK_json.length;i++){
        var data={
            name:GNSK_json[i].sname,
            max:6
        }
        var fzid="GNSK"+GNSK_json[i].fzid;
        var headId="headingOne"+i;
        str+="<div class=\"card\" style=\"margin-bottom: 0px;\">";
        str+="<div class=\"card-header\" role=\"tab\" id=\""+headId+"\">";
        str+="<h5 class=\"mb-0 mt-0 font-16\">";
        // str+="<input type=\"checkbox\" name=\"lx1\" value=\""+GNSK_json[i].fzid+"\" />";
        str+="<a data-toggle=\"collapse\" data-parent=\"#GNSK_MSG\" href=\"#"+fzid+"\" aria-expanded=\"false\" aria-controls=\"collapseOne\" class=\"text-dark collapsed\">";
        if(GNSK_json[i].num==max_temp){
            str+=GNSK_json[i].sname+" 🌟";
        }else{
            str+=GNSK_json[i].sname;
        }

        str+="</a></h5></div>";


        str+="<div id=\""+fzid+"\" class=\"collapse\" role=\"tabpanel\" aria-labelledby=\""+headId+"\" style=\"\">";
        str+="<div class=\"card-body\">";
        str+=GNSK_json[i].bz;
        str+="</div></div></div>";


        // str+="<div class=\"statistic d-flex align-items-center bg-white has-shadow\">\n" +
        //     "                    <div class=\"icon bg-red\"><i class=\"fa fa-tasks\">"+GNSK_json[i].num+"</i></div>\n" +
        //     "                    <div class=\"text\"><small>"+GNSK_json[i].bz+"</small></div>\n" +
        //     "                </div>";

        nums.push(GNSK_json[i].num);
        datas.push(data);
        $('#GNSK_MSG').html(str);
    }
    // 指定图表的配置项和数据
    var option = {
        tooltip: {},
        radar: {
            // shape: 'circle',
            name: {
                textStyle: {
                    color: '#fff',
                    backgroundColor: '#999',
                    borderRadius: 3,
                    padding: [3, 5]
                }
            },
            indicator: datas
        },
        series: [{
            //name: '预算 vs 开销（Budget vs spending）',
            type: 'radar',
            data : [
                {
                    value : nums,
                    name : '客户倾向'
                }
            ]
        }]
    };

    // 使用刚指定的配置项和数据显示图表。
    GNSK.setOption(option);




    var SJTJ = echarts.init(document.getElementById('SJTJ'));
    var SJTJ_json=${jxcpcsAccessPageBean.SJTJ_JSON};
    var datas_option_SJTJ=[];
    var nums_SJTJ=[];
    var str_SJTJ="";

    var max_temp_1=0;//选择最多的
    for(var i=0;i<SJTJ_json.length;i++) {
        if(SJTJ_json[i].num>max_temp_1){
            max_temp_1=SJTJ_json[i].num;
            maxId_1=SJTJ_json[i].fzid;
        }
    }

    for(var i=0;i<SJTJ_json.length;i++){
        var data={
            name:SJTJ_json[i].sname,
            max:5
        }

        var fzid_SJTJ="SJTJ"+SJTJ_json[i].fzid;
        var headId_SJTJ="headingOne"+i;
        str_SJTJ+="<div class=\"card\" style=\"margin-bottom: 0px;\">";
        str_SJTJ+="<div class=\"card-header\" role=\"tab\" id=\""+headId_SJTJ+"\">";
        str_SJTJ+="<h5 class=\"mb-0 mt-0 font-16\">";
        // str_SJTJ+="<input type=\"checkbox\" name=\"lx2\" value=\""+SJTJ_json[i].fzid+"\" />";
        str_SJTJ+="<a data-toggle=\"collapse\" data-parent=\"#GNSK_MSG\" href=\"#"+fzid_SJTJ+"\" aria-expanded=\"false\" aria-controls=\"collapseOne\" class=\"text-dark collapsed\">";
        if( SJTJ_json[i].num==max_temp_1){
            str_SJTJ+=SJTJ_json[i].sname+" 🌟";
        }else{
            str_SJTJ+=SJTJ_json[i].sname;
        }

        str_SJTJ+="</a></h5></div>";

        str_SJTJ+="<div id=\""+fzid_SJTJ+"\" class=\"collapse\" role=\"tabpanel\" aria-labelledby=\""+headId_SJTJ+"\" style=\"\">";
        str_SJTJ+="<div class=\"card-body\">";
        str_SJTJ+=SJTJ_json[i].bz;
        str_SJTJ+="</div></div></div>";


        // str_SJTJ+="<div class=\"statistic d-flex align-items-center bg-white has-shadow\">\n" +
        //     "                    <div class=\"icon bg-red\"><i class=\"fa fa-tasks\">"+SJTJ_json[i].num+"</i></div>\n" +
        //     "                    <div class=\"text\"><small>"+SJTJ_json[i].bz+"</small></div>\n" +
        //     "                </div>";

        nums_SJTJ.push(SJTJ_json[i].num);
        datas_option_SJTJ.push(data);
        $('#SJTJ_MSG').html(str_SJTJ);
    }
    // 指定图表的配置项和数据
    var option_SJTJ = {
        tooltip: {},
        radar: {
            // shape: 'circle',
            name: {
                textStyle: {
                    color: '#fff',
                    backgroundColor: '#999',
                    borderRadius: 3,
                    padding: [3, 5]
                }
            },
            indicator: datas_option_SJTJ
        },
        series: [{
            //name: '预算 vs 开销（Budget vs spending）',
            type: 'radar',
            data : [
                {
                    value : nums_SJTJ,
                    name : '客户倾向'
                }
            ]
        }]
    };

    // 使用刚指定的配置项和数据显示图表。
    SJTJ.setOption(option_SJTJ);

    $('#savePrint').click(function(){
        var lx1 = $("input[name='lx1']:checked");
        var lx2 = $("input[name='lx2']:checked");
        var xgtz = $("input[name='xgtz']:checked");
        $.ajax({
            type: "POST",
            data:{
                id:'${yycpbg.id}',
                printlx1:getList(lx1).join(','),
                printlx2:getList(lx2).join(','),
                printlx3:getList(xgtz).join(',')
            },
            url: "/com/imelite/qyh/YycpbgAction/insert.do",
            success: function(result) {
                if ( result.code == 200 ) {
                    alert("感谢您完成测评，请您联系我们的前提人员为您进行下一步的安排,谢谢");
                    $('#f2').submit();
                } else {
                    alert(result.msg);
                }
            },
            error:function(data){
                alert("系统异常！");
            }
        });
        alert(getList(lx2));
        alert(getList(xgtz));

    });

    function getList(boxes){
        var idlist=[];
        for(var i=0;i<boxes.length;i++){
            idlist.push(boxes[i].value);
        }
        return idlist;
    }
</script>
</body>
